<template>
    <el-dialog
        title="设置通知"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="1100px"
        top="10px"
        :close="clearData"
        :before-close="clearData"
    >
        <el-form ref="form" size="small" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="标题:" prop="title">
                <el-input v-model="form.title" style="width: 350px"></el-input>
            </el-form-item>

            <el-form-item label="系统:" prop="plantforms">
                <el-checkbox-group
                    v-model="form.plantforms"
                    :disabled="!!currRow.id"
                >
                    <el-checkbox
                        v-for="(item, index) in systemList"
                        :label="item.id + ''"
                        :key="index"
                        >{{ item.name }}</el-checkbox
                    >
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="角色:" prop="roleIds">
                <el-checkbox-group
                    v-model="form.roleIds"
                    :disabled="!!currRow.id"
                >
                    <el-checkbox
                        v-for="(item, index) in roleList"
                        :label="item.id + ''"
                        :key="index"
                        >{{ item.name }}</el-checkbox
                    >
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="内容：" prop="content">
                <tinymce-editor
                    v-if="showValue"
                    ref="editor"
                    v-model="form.content"
                ></tinymce-editor>
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button size="small" @click="clearData">取 消</el-button>
            <el-button
                type="primary"
                size="small"
                :loading="loading"
                @click="save"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
import TinymceEditor from '@/common/Tinymce'
export default {
    props: {
        value: Boolean,
        currRow: Object,
        roleList: Array,
        systemList: Array
    },
    components: {
        TinymceEditor
    },
    data () {
        return {
            loading: false,
            showValue: false,
            form: {
                roleIds: [],
                plantforms: [],
                title: '',
                content: ''
            },
            rules: {
                title: [
                    { required: true, message: '不能为空', trigger: 'blue' }
                ],
                content: [
                    { required: true, message: '不能为空', trigger: 'blue' }
                ],
                plantforms: [
                    { required: true, message: '不能为空', trigger: 'blue' }
                ],
                roleIds: [
                    { required: true, message: '不能为空', trigger: 'blue' }
                ]
            }
        }
    },
    watch: {
        value (val) {
            console.log(val)
            this.showValue = val
        },
        showValue (val) {
            if (val) {
                console.log(this.currRow)
                if (this.currRow.id) {
                    this.getDetail()
                } else {
                    this.form = {
                        roleIds: [],
                        plantforms: [],
                        title: '',
                        content: '',
                        id: ''
                    }
                    this.form.roleIds = this.roleList.map(item => { return item.id + '' })
                    this.form.plantforms = this.systemList.map(item => { return item.id + '' })
                    console.log(this.form)
                }
            }
            this.$emit('update:value', val)
        }
    },
    created () {
    },
    methods: {
        getDetail () {
            this.$http.get(this.$store.state.IP + `/notify/announce/detail?id=${this.currRow.id}`, {
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.form = response.data
                    this.form.plantforms = this.form.plantforms.split(',')
                    this.form.roleIds = this.form.roleIds.split(',')
                    console.log(this.form)
                }
            }, response => {
            })
        },
        save () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true
                    this.$http.post(this.$store.state.IP + '/notify/announce/create', {
                        ...this.form
                    },
                        {
                            'emulateJSON': false
                        }
                    ).then(response => {
                        console.log('-------------------------------------------')
                        response = response.body
                        console.log(response)
                        if (response.ret === '0') {
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            })
                            this.$emit('getList')
                            this.clearData()
                            this.loading = false
                        } else {
                            this.loading = false
                        }
                    }, response => {
                        this.loading = false
                        console.log('通讯失败')
                    })
                }
            })
        },
        // 清空数据
        clearData () {
            this.$refs['form'].resetFields()
            this.showValue = false
        }
    }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.item
    width: 180px

.right
    text-align: right
</style>